<template>
  <div>
      <div id="showfrom" style="width:500px;height:500px"></div>
      客户信息展示
      <ul>
            <li v-for='i in customerlist.data' :key='i.name'>{{i.name}}</li>
        </ul>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios';
import { reactive } from '@vue/reactivity';
export default {
    setup(){

        let customerlist = reactive({'data':[{'name':'婧婧'}]})

        // 初始化websocket
        const initwebsocket=()=>{
            let socket = new WebSocket('ws://127.0.0.1:8000/websocket_conn/')

            // 建立连接
            socket.onopen=function(){
                console.log("on open");
            }

            // 接收消息
            socket.onmessage=function(msg){
                customerlist.data = JSON.parse(msg.data)
                console.log(customerlist);
            }

            // 关闭连接
            socket.close = function(e){
                console.log(e);
                console.log('close');
            }
        }

        return{
            initwebsocket,
            customerlist
        }

    },
    data(){
        return{
            fromlist:[],
        }
    },

    methods:{
        // 实例化图形
        initfrom(){
            let showfrom = document.getElementById('showfrom');
            var mychart = echarts.init(showfrom);
            var option;

            option = {
            title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: this.fromlist,
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
            };

            option && mychart.setOption(option);
        },


        // 请求数据
        getResourceFrom(){
            axios.get('http://localhost:8000/getmes/').then(res=>{
                this.fromlist = res.data.list
                this.initfrom()
                console.log(res);
            })
            
        }

    },

    mounted(){
        this.getResourceFrom();
        this.initwebsocket()

    }

}
</script>

<style>

</style>